<template>
  <div class="home-wrapper">
    <home-header class="top-bar"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-top :topList="topList"></home-top>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import axios from 'axios'
import HomeHeader from '@/pages/home/components/HomeHeader'
import HomeSwiper from '@/pages/home/components/HomeSwiper'
import HomeIcons from '@/pages/home/components/HomeIcons'
import HomeRecommend from '@/pages/home/components/HomeRecommend'
import HomeWeekend from '@/pages/home/components/Weekend'
import HomeTop from '@/pages/home/components/HomeTop'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      swiperList: [],
      iconList: [],
      topList: [],
      recommendList: [],
      weekendList: [],
      lastCity: ''
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
    HomeTop
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHomeData () {
      axios.get('/static/api/index.json')
        .then(this.getHomeDataSucc)
    },
    getHomeDataSucc (res) {
      res = res.data
      if (res.status === 200) {
        res = res.data
        this.swiperList = res.swiperList
        this.iconList = res.iconList
        this.topList = res.topList
        this.recommendList = res.recommendList
        this.weekendList = res.weekendList
      }
    }
  },
  mounted () {
    this.lastCity = this.city
    this.getHomeData()
  },
  activated () { // 每次加载该路由时触发， 有 keep-alive 标签时才可使用
    if (this.lastCity !== this.city) {
      this.getHomeData()
      this.lastCity = this.city
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home-wrapper
    padding-top: .86rem
    background-color: #f7f7f7
    .top-bar
      width: 100%
      position: fixed
      top: 0
      left: 0
      z-index: 999
</style>
